عندما سوف تقوم بإنشاء مدونة على بلوجر فسوف يقوم بزيارة موقعك الكثير من الأشخاص بمختلف الأجهزة اللوحية منها الكمبيوتر ، التابلت والهواتف بمختلف احجامها وغيرها من الأجهزة المختلفة والمتنوعة لذلك يجب ان تجعل موقعك متجاوبا مع مختلف هذه الأجهزة لكي يستأنس الزوار بموقعك وتحصل على متابعين لموقعك من مختلف الأجهزة الإلكترونية ولكي يكون موقعك ايضا محبب لمحركات البحث وتحصل على مراتب اولى في مختلف محركات البحث لذلك في هذا الشرح سوف اقدم لك أكواد تستطيع من خلاله التحكم في اكواد CSS لمختلف الأجهزة التي تزور موقعك تابع معي .
لأكون معك صريحا اذا كان هذا الموضوع جديدا عليك فيجب عليك قرائته بتمعن لكي تفهم لأنه نوعا ما سيكون صعبا على الكثير من الناس خصوصا من لا يعرفون اي شيء حول لغة البرمجة Css ولا يستطعون حتى تعديل قوالب بلوجر مثلا .
ضروري
قبل ان اقدم لك أكواد التحكم في CSS لكل جهاز يجب عليك أولا التأكد من وجود هذا كود التالي في قالب موقعك بين <head> و </head> لذلك اذا لم يكن موجود قم بإضافته في ل head ، هذا هو الكود :
<meta name="viewport" content="width=device-width, initial-scale=1.0">والآن سوف اقدم لكم أكواد التحكم في Css حسب أبعاد كل شاشة كل جهاز
بالنسبة لناس الذين لا يعرفون ماهي هذه الأكواد وما فائدتها ؟ كل ما في الأمر أن هذه الأكواد التي سأقدمها هي اكواد تضع داخلها اكواد Css معينة وهذه الأكواد التي وضعتها لن تعمل الا اذا كانت حجم الشاشة اصغر او يساوي max-width الموجود في الأكواد التي سأقدمها لك .
بالنسبة لأجهزة الهواتف
@media screen and (max-width: 312px) {
ضع كودات Css هنا}
بالنسبة لأجهزة الهواتف الكبيرة والتابلت المتوسط
@media screen and (max-width: 480px) {
ضع كودات Css هنا}
بالنسبة لأجهزة التابلت الكبيرة
@media screen and (max-width: 640px) {
ضع كودات Css هنا}
بالنسبة لأجهزة اللابتوب الصغيرة والتابلت الكبير جدا
@media screen and (max-width: 1024px) {
ضع كودات Css هنا}
بالنسبة للأجهزة اللابتوب المتوسطة
@media screen and (max-width: 1360px) {
ضع كودات Css هنا}
بالنسبة لأجهزة اللابتوب الكبيرة و شاشات الكبيرة FHD
@media screen and (max-width: 1920px) {
ضع كودات Css هنا}
ملحوظة
ليس من المفروض ان تقوم بوضع كودات Css مخصصة لكل حجم شاشة على حدا لكي يعتبر موقعك متجاوبا بل يكفي ان تضع اكواد مخصصة لثلاث شاشات الأوائل التي قدمتهم لك يعني 312px و 480px و 640px .
اريد كذلك ان احيل انه عندما تريد وضع الأكواد التي قدمتها لك في القالب قم بوضعها مرتبة من الأكبر الى الأصغر على هذا الشكل :
screen and (max-width: 1224px) {
ستكون اكواد مخصصة هنا انت ستضعها
}
screen and (max-width: 640px) {
ستكون اكواد مخصصة هنا انت ستضعها
}
screen and (max-width: 480px) {
ستكون اكواد مخصصة هنا انت ستضعها
}
screen and (max-width: 320px) {
ستكون اكواد مخصصة هنا انت ستضعها
}